<template>
  <div>
    <!-- 顶部导航栏 -->
    <nav class="top-navbar">
      <ul>
        <li><router-link to="/">首页</router-link></li>
        <li><router-link to="/production">制作播发</router-link></li>
        <li><router-link to="/scheduling">调度控制</router-link></li>
        <li><router-link to="/operations">运维管理</router-link></li>
        <li><router-link to="/security">安全服务</router-link></li>
        <li><router-link to="/emergency">应急指挥</router-link></li>
      </ul>
    </nav>

    <!-- 左侧导航栏 -->
    <nav class="side-navbar">
      <ul>
        <li><router-link to="/info-access">信息接入</router-link></li>
        <li><router-link to="/info-processing">信息处理</router-link></li>
        <li @click="toggleInfoProduction">
          <span>信息制作</span>
          <ul v-if="showInfoProduction">
            <li><router-link to="/text-production">文本制作</router-link></li>
            <li><router-link to="/audio-production">音频制播</router-link></li>
            <li><router-link to="/video-production">视频制播</router-link></li>
            <li><router-link to="/live-production">直播内制作设置</router-link></li>
          </ul>
        </li>
        <li><router-link to="/asset-management">媒资管理</router-link></li>
      </ul>
    </nav>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <h1>杭州市应急广播平台</h1>
      <div class="search-bar">
        <input type="text" placeholder="搜索信息名称" />
        <button>搜索</button>
      </div>
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>时间范围</th>
              <th>消息名称</th>
              <th>开始时间</th>
              <th>结束时间</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>近三个月</td>
              <td>消息名称1</td>
              <td>2023-01-01</td>
              <td>2023-03-31</td>
              <td>待复核</td>
              <td><button>预览</button></td>
            </tr>
            <!-- 更多行数据 -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InfoAccessView',
  data() {
    return {
      showInfoProduction: false
    };
  },
  methods: {
    toggleInfoProduction() {
      this.showInfoProduction = !this.showInfoProduction;
    }
  }
}
</script>

<style scoped>
.top-navbar {
  background-color: #333;
  overflow: hidden;
}

.top-navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.top-navbar li {
  flex: 1;
}

.top-navbar a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.top-navbar a:hover {
  background-color: #575757;
}

.side-navbar {
  background-color: #444;
  overflow: hidden;
  width: 200px;
  position: fixed;
  height: 100%;
}

.side-navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.side-navbar li {
  padding: 8px;
}

.side-navbar a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 8px 16px;
}

.side-navbar a:hover {
  background-color: #575757;
}

.side-navbar ul ul {
  display: none;
  position: relative;
  left: 200px;
  top: -32px; /* Adjust based on your design */
  background-color: #555;
}

.side-navbar ul li:hover ul {
  display: block;
}

.side-navbar span {
  color: white;
  padding: 8px 16px;
  display: block;
  cursor: pointer;
}

.main-content {
  margin-left: 200px; /* 调整左侧导航栏的宽度 */
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
}

.table-container {
  border: 1px solid #ccc;
  border-collapse: collapse;
  width: 100%;
}

.table-container th,
.table-container td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
</style>